<template>
  <div class="feedback-container">
    <div v-if="feedback" class="feedback-data">
      <h2>反馈数据</h2>
      <p>省份：{{ feedback.province }}</p>
      <p>城市：{{ feedback.city }}</p>
      <p>时间：{{ feedback.time }}</p>
      <p>地址：{{ feedback.address }}</p>
    </div>
    <div class="input-container">
      <el-form :model="form">
        <el-form-item label="SO2 浓度（ug/m3）">
          <el-input v-model="form.so2" placeholder="请输入 SO2 浓度"></el-input>
        </el-form-item>
        <el-form-item label="CO 浓度（ug/m3）">
          <el-input v-model="form.co" placeholder="请输入 CO 浓度"></el-input>
        </el-form-item>
        <el-form-item label="PM2.5 浓度（ug/m3）">
          <el-input v-model="form.pm25" placeholder="请输入 PM2.5 浓度"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div :class="`aqi-level-${aqiLevel}`" class="aqi-result">
      <p>实测 AQI 指数：{{ aqi }}</p>
      <p>实测 AQI 等级：{{ aqiLevelText }}</p>
    </div>

    <el-button type="primary" @click="submitData">提交实测数据</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus';

// 假设从后端获取的反馈数据的 URL
const feedbackUrl = 'https://example.com/api/feedback';

const feedback = ref(null);
const form = ref({
  so2: '',
  co: '',
  pm25: ''
});

async function fetchFeedbackData() {
  // 模拟从后端获取数据
  feedback.value = await fetch(feedbackUrl).then(response => response.json());
}

onMounted(fetchFeedbackData);

const aqi = computed(() => {
  const so2 = parseFloat(form.value.so2) || 0;
  const co = parseFloat(form.value.co) || 0;
  const pm25 = parseFloat(form.value.pm25) || 0;

   // 计算 x 的级别
    let x;
    if (so2 < 50) {
      x = 1;
    } else if (so2 >= 50 && so2 < 150) {
      x = 2;
    } else if (so2 >= 150 && so2 < 475) {
      x = 3;
    } else if (so2 >= 475 && so2 < 800) {
      x = 4;
    } else if (so2 >= 800 && so2 < 1600) {
      x = 5;
    } else {
      x = 6;
    }
  
    // 计算 y 的级别
    let y;
    if (co < 2000) {
      y = 1;
    } else if (co >= 2000 && co < 4000) {
      y = 2;
    } else if (co >= 4000 && co < 14000) {
      y = 3;
    } else if (co >= 14000 && co < 24000) {
      y = 4;
    } else if (co >= 24000 && co < 36000) {
      y = 5;
    } else {
      y = 6;
    }
  
    // 计算 z 的级别
    let z;
    if (pm25 < 35) {
      z = 1;
    } else if (pm25 >= 35 && pm25 < 75) {
      z = 2;
    } else if (pm25 >= 75 && pm25 < 115) {
      z = 3;
    } else if (pm25 >= 115 && pm25 < 150) {
      z = 4;
    } else if (pm25 >= 150 && pm25 < 250) {
      z = 5;
    } else {
      z = 6;
    }
  
    // 返回 x, y, z 的最大值
    return Math.max(x, y, z);
});

// const aqiLevel = computed(() => {
//   if (aqi.value <= 50) return 1;
//   if (aqi.value <= 100) return 2;
//   if (aqi.value <= 150) return 3;
//   if (aqi.value <= 200) return 4;
//   if (aqi.value <= 300) return 5;
//   return 6;
// });

const aqiLevelText = computed(() => {
  switch (aqi.value) {
    case 1: return '优';
    case 2: return '良';
    case 3: return '轻度污染';
    case 4: return '中度污染';
    case 5: return '重度污染';
    case 6: return '严重污染';
    default: return '未知';
  }
});

function submitData() {
  console.log('提交的数据:', form.value);
  
  alert('数据已提交！');
}
</script>

<style scoped>
.feedback-container {
  padding: 20px;
}

.feedback-data {
  margin-bottom: 20px;
}

.input-container {
  margin-bottom: 20px;
}

.aqi-result {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 5px;
}

.aqi-level-1 {
  background-color: #00e400;
}

.aqi-level-2 {
  background-color: #ffff00;
}

.aqi-level-3 {
  background-color: #ff7e00;
}

.aqi-level-4 {
  background-color: #ff0000;
}

.aqi-level-5 {
  background-color: #99004c;
}

.aqi-level-6 {
  background-color: #7e0023;
}
</style>
     